<template>
    <div class="process-container">
        <div class="top-bar">
            <el-button type="primary">新增</el-button>
            <el-button>导出</el-button>
            <div class="search-bar">
                <el-input placeholder="请搜索" suffix-icon="el-icon-search"></el-input>
            </div>
        </div>
        <el-table :data="dataList" stripe>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="工艺流程编号" prop="processCode"></el-table-column>
            <el-table-column label="工艺流程名称" prop="processName"></el-table-column>
            <el-table-column label="工序数量" prop="processCount"></el-table-column>
            <el-table-column label="负责人" prop="responsiblePerson"></el-table-column>
            <el-table-column label="所属部门" prop="department"></el-table-column>
            <el-table-column label="状态" prop="status"></el-table-column>
            <el-table-column label="备注" prop="remark"></el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button size="small" type="text">编辑</el-button>
                    <el-button size="small" type="text" style="color: red;">删除</el-button>
                    <el-button size="small" type="text">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination :total="total" :page-size="pageSize" :current-page="currentPage"
                @current-change="handlePageChange" layout="prev, pager, next, jumper"></el-pagination>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据，实际应通过接口获取
const dataList = ref([
    {
        processCode: 'CF-001',
        processName: '智能手机生产工艺',
        processCount: 15,
        responsiblePerson: '张伟',
        department: '生产部',
        status: '启用',
        remark: ''
    },
    {
        processCode: 'CF-002',
        processName: '电动汽车电池组装工艺',
        processCount: 20,
        responsiblePerson: '李娜',
        department: '生产部',
        status: '启用',
        remark: ''
    },
    // 可继续补充更多模拟数据
]);

const total = ref(101); // 总数据量
const pageSize = ref(5); // 每页显示数量
const currentPage = ref(1); // 当前页码

// 分页变化处理
const handlePageChange = (page) => {
    currentPage.value = page;
    // 此处可调用接口获取对应页数据，如：axios.get(`/api/process?page=${page}&size=${pageSize}`);
};
</script>

<style scoped>
.process-container {
    padding: 20px;
}

.top-bar {
    margin-bottom: 20px;
}

.top-bar el-button {
    margin-right: 10px;
}

.search-bar {
    float: right;
    width: 300px;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}
</style>